<script>
    let storeComponent = {
        template: `
      <div style="width: 100%">
        <el-row>
            <el-button v-if="storeType == 1" type="primary" size="small" round>客户列表</el-button>
            <el-button v-if="storeType != 1" type="default" size="small" round @click="setStoreType(1)">客户列表</el-button>
            <el-button v-if="storeType == 2" type="primary" size="small" round>供应商列表</el-button>
            <el-button v-if="storeType != 2" type="default" size="small" round @click="setStoreType(2)">供应商列表</el-button>


        </el-row>

        <el-row>
            <el-form :inline="true" class="form-inline recordSearchForm" style="margin-top: 10px">
                <el-form-item size="mini">
                <el-input :placeholder="(storeType == 1 ? '客户' : '供应商')+'名称'" v-model="searchForm.titleLike"></el-input>
            </el-form-item>
             <el-button  type="primary" size="mini" @click="getLists()" > 搜索</el-button>
            <span class="frBtn" style="">
            <img src="/static/images/daoru.png" style="margin-right: 10px;width:20px;height: 20px" @click="exportData()" />
            <img src="/static/images/daochu.png" style="margin-right: 10px;width:20px;height: 20px" @click="upload()" />
            <el-button type="primary" size="mini" @click="storeForm={};storeDialog=true" class="frBtn"><i class="el-icon-plus" /> 新增{{storeType == 1 ? "客户" : "供应商" }}</el-button>
            </span>
        </el-row>

        <div class="clearfix" style="margin-top: 10px;">

        </div>
        <div>
         <template>
            <el-table
                    :data="storeList"
                    type="index"
                    stripe
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="名称" sortable>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="editStore(scope.row)"></el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="deleteStoreRow(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
          </template>
        </div>
       <!--客户/供应商编辑表单框------>
       <store-form :dialogShow="storeDialog" :storeType="storeType" :formRow="storeForm" @modalClose="modalClose"></store-form>
       <export-dialog
            :dialogShow="exportDialog"
            @modalCloseq="modalExportDialogClose"
            :downloadUrl="'https://static.gongsizhang.com/muban/store_export.xlsx'"
            :uploadUrl="'/api/store/import-data'"
            :type="storeType"
        />

</div>
    </div>
    `,
        computed: {
            currentTallyId() {
                return this.$store.state.currentTallyId
            },
            currentTally () {
                return this.$store.state.currentTally
            }
        },
        data:function(){
            return {
                storeDialog: false,
                exportDialog: false,
                storeType: 1,
                storeForm: {},
                storeList:[],
                searchForm:{}
            }
        },
        mounted(){
            this.getLists()
        },
        methods:{
            modalClose(){
                console.log("======>aaaa")
                this.storeDialog = false
                this.getLists()
            },
            modalExportDialogClose(){
                this.exportDialog = false
                this.getLists()
            },
            setStoreType(type){
                if(type !== this.storeType) {
                    this.storeType = type
                }
                this.getLists()
            },
            getLists(){
                let params = this.searchForm;
                params['tally_id'] = this.currentTallyId;
                params['type'] = this.storeType;
                let that = this;
                axios.get('/api/store/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params:params
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.storeList = res.data.data
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },

            exportData(){
                let that = this
                axios.get('/api/store/export',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: {
                        tally_id:that.currentTallyId,
                        type:that.storeType
                    }
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        let filepath = res.data.data.filepath
                        let a = document.createElement('a');
                        a.target = "_blank";
                        a.href = filepath;
                        a.click();
                        console.log(res.data)
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
            upload(){
                this.exportDialog = true;
            },
            editStore(row){
                this.storeForm = JSON.parse(JSON.stringify(row))
                this.storeDialog = true
            },
            deleteStoreRow(row){
                let that = this
                this.$confirm('确定要删除该行：'+row['title'], '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        if(action === 'confirm') {
                            let postUrl = '/api/store/del'
                            axios.post(postUrl, {
                                id:row['id'],
                                tally_id:that.currentTallyId
                            },{
                                headers: {'token': loginToken},
                            }).then(function(res) {
                                if(res.data.status === 'success'){
                                    that.$message({
                                        type: 'success',
                                        message: '操作成功~'
                                    });
                                    that.getLists()
                                    that.$store.dispatch('getStoreList', {
                                        tallyId: that.currentTallyId,
                                        type: that.storeType
                                    })
                                }else{
                                    that.$message({
                                        type: 'error',
                                        message: '解析数据失败:'+res.data.error_message
                                    })
                                }
                            })
                        }
                    }
                })
            }
        }
    }
</script>
